
.el-button--primary {
  color: #f3f3f3;
  background-color: $magicPrimary;
  border-color:  $magicPrimary;
}
.el-button--primary:focus,
.el-button--primary:hover {
  background-color: $magicPrimaryLight;
  border-color:  $magicPrimaryLight;
  color: #f3f3f3;
}
.el-button--primary.is-active,
.el-button--primary:active {
  background-color: $magicPrimaryLight;
  border-color:  $magicPrimaryLight;
  color: #f3f3f3;
}

.el-button--magicBlue {
  color: #f3f3f3;
  background-color: $magicBlue;
  border-color:  $magicBlue;
}
.el-button--magicBlue:focus,
.el-button--magicBlue:hover {
  background-color: $magicBlueLight;
  border-color:  $magicBlueLight;
  color: #f3f3f3;
}
.el-button--magicBlue.is-active,
.el-button--magicBlue:active {
  background-color: $magicBlueLight;
  border-color:  $magicBlueLight;
  color: #f3f3f3;
}



.el-button--magicGreen {
  color: #f3f3f3;
  background-color: $magicGreen;
  border-color:  $magicGreen;
}
.el-button--magicGreen:focus,
.el-button--magicGreen:hover {
  background-color: $magicGreenLight;
  border-color:  $magicGreenLight;
  color: #f3f3f3;
}
.el-button--magicGreen.is-active,
.el-button--magicGreen:active {
  background-color: $magicGreenLight;
  border-color:  $magicGreenLight;
  color: #f3f3f3;
}


